<template>
	<view class="bg-white">
		<view class="solid"></view>
		<scroll-view class="pinjia_list bg-white" scroll-y="true" @scrolltolower="scrolltolower">
			<view v-for="(item,index) in list" :key="index" class="item" >
				<view class="user_img flex-cb">
					<image :src="item.user.avatar?url+item.user.avatar:'/static/logo.png'" mode=""></image>
					<view class="user_name flex-cb">
						<view>
							<view class="name">{{item.user.nickname?item.user.nickname:'微信用户'}}</view>
							<text class="time">{{item.created_at}}</text>
						</view>
						<view>
							<text v-for="(i,t) in 5" :key="t" class="cuIcon-favorfill" :class="{icon:t < item.star}"></text>
						</view>
					</view>
				</view>
				<view class="pinyu">{{item.content}}</view>
				<view class="flex pinyu_img">
					<view class="" v-for="(i,j) in item.files" :key="j">
						<image :src="url+i" mode=""></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:'',
				page:1,
				limit:10,
				last_page:1,
				list:[],
				id:0
			};
		},
		onLoad(e) {
			this.id = e.id
			this.url = this.$base
			this.getlist(this.id)
		},
		methods:{
			getlist(id){
				this.$api.comments_list({
					page:this.page,
					limit:this.limit
				},id,1).then(res=>{
					this.last_page = res.last_page
					console.log(res);
					this.list = [...this.list,...res.list]
				})
			},
			scrolltolower(){
				if(this.last_page == this.page){
					return
				}else{
					this.page++
					this.getlist()
				}
			}
		}
	}
</script>

<style lang="scss">
.pinjia_list{
	height: 100vh;
	overflow: hidden;
	.item{
		padding: 27rpx 18rpx 28rpx 45rpx;
		.user_img{
			image{
				width: 60rpx;height: 60rpx;border-radius: 50%;
			}
			.user_name{
				padding-left: 19rpx;
				flex: 1;
				.name{
					font-size: 28rpx;color: #333;
				}
				.time{
					font-size: 20rpx;
					color: #999999;
				}
				.cuIcon-favorfill{
					color: #EBEBEB;
				}
				.icon{
					color: #FF6F10;
				}
			}
		}
		.pinyu{
			margin-top: 13rpx;
			margin-bottom: 25rpx;
			font-size: 28rpx;
			color: #333333;
		}
		.pinyu_img{
			image{
				width: 160rpx;height: 160rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
			}
		}
	}
}
</style>
